<!-- <script src="/aifish/common/check.pjax.js"></script> -->
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>DatePicker日期选择器</h1>
        <section class="markdown">
            <p>Bootstrap-datepicker 提供灵活的日期选择控件。</p>
            <!-- <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2> -->
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
    </section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
                        <div class="box box-primary">
                            <div class="box-header">
                                <h3 class="box-title">Date picker</h3>
                            </div>
                            <div class="box-body">
                                <!-- Date -->
                                <div class="form-group">
                                    <label>Date:</label>
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right" id="datepicker">
                                    </div>
                                    <!-- /.input group -->
                                </div>
                                <!-- /.form group -->
                                <!-- Date range -->
                                <div class="form-group">
                                    <label>Date range:</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right" id="reservation">
                                    </div>
                                    <!-- /.input group -->
                                </div>
                                <!-- /.form group -->
                                <!-- Date and time range -->
                                <div class="form-group">
                                    <label>Date and time range:</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right" id="reservationtime">
                                    </div>
                                    <!-- /.input group -->
                                </div>
                                <!-- /.form group -->
                                <!-- Date and time range -->
                                <div class="form-group">
                                    <label>Date range button:</label>
                                    <div class="input-group">
                                        <button type="button" class="btn btn-default pull-right" id="daterange-btn">
                                            <span>November 28, 2017 - December 4, 2017</span>
                                            <i class="fa fa-caret-down"></i>
                                        </button>
                                    </div>
                                </div>
                                <!-- /.form group -->
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <script src="dist/lib/bootstrap/bootstrap-daterangepicker/2.1.25/moment.js"></script>
                        <script src="dist/lib/bootstrap/bootstrap-datepicker/bootstrap-datepicker.js"></script>
                        <script src="dist/lib/bootstrap/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
                        <script type="text/javascript">
                        //Date range picker
                        $('#reservation').daterangepicker()
                        //Date range picker with time picker
                        $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' })
                        //Date range as a button
                        $('#daterange-btn').daterangepicker({
                                ranges: {
                                    'Today': [moment(), moment()],
                                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                                },
                                startDate: moment().subtract(29, 'days'),
                                endDate: moment()
                            },
                            function(start, end) {
                                $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
                            }
                        )

                        //Date picker
                        $('#datepicker').datepicker({
                            autoclose: true
                        })
                        </script>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                        <p>在要应用按钮样式的元素上添加<code>.btn</code>，再设置相应的颜色。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-primary&quot;&gt;
    &lt;div class=&quot;box-header&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Date picker&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box-body&quot;&gt;
        &lt;!-- Date --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Date:&lt;/label&gt;
            &lt;div class=&quot;input-group date&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control pull-right&quot; id=&quot;datepicker&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- Date range --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Date range:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control pull-right&quot; id=&quot;reservation&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- Date and time range --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Date and time range:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control pull-right&quot; id=&quot;reservationtime&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- Date and time range --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Date range button:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-default pull-right&quot; id=&quot;daterange-btn&quot;&gt;
                    &lt;span&gt;November 28, 2017 - December 4, 2017&lt;/span&gt;
                    &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
    &lt;/div&gt;
    &lt;!-- /.box-body --&gt;
&lt;/div&gt;

&lt;script src=&quot;dist/lib/bootstrap/bootstrap-daterangepicker/2.1.25/moment.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;dist/lib/bootstrap/bootstrap-datepicker/bootstrap-datepicker.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;dist/lib/bootstrap/bootstrap-daterangepicker/2.1.25/daterangepicker.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  //Date range picker
    $(&#x27;#reservation&#x27;).daterangepicker()
    //Date range picker with time picker
    $(&#x27;#reservationtime&#x27;).daterangepicker({ timePicker: true, timePickerIncrement: 30, format: &#x27;MM/DD/YYYY h:mm A&#x27; })
    //Date range as a button
    $(&#x27;#daterange-btn&#x27;).daterangepicker(
      {
        ranges   : {
          &#x27;Today&#x27;       : [moment(), moment()],
          &#x27;Yesterday&#x27;   : [moment().subtract(1, &#x27;days&#x27;), moment().subtract(1, &#x27;days&#x27;)],
          &#x27;Last 7 Days&#x27; : [moment().subtract(6, &#x27;days&#x27;), moment()],
          &#x27;Last 30 Days&#x27;: [moment().subtract(29, &#x27;days&#x27;), moment()],
          &#x27;This Month&#x27;  : [moment().startOf(&#x27;month&#x27;), moment().endOf(&#x27;month&#x27;)],
          &#x27;Last Month&#x27;  : [moment().subtract(1, &#x27;month&#x27;).startOf(&#x27;month&#x27;), moment().subtract(1, &#x27;month&#x27;).endOf(&#x27;month&#x27;)]
        },
        startDate: moment().subtract(29, &#x27;days&#x27;),
        endDate  : moment()
      },
      function (start, end) {
        $(&#x27;#daterange-btn span&#x27;).html(start.format(&#x27;MMMM D, YYYY&#x27;) + &#x27; - &#x27; + end.format(&#x27;MMMM D, YYYY&#x27;))
      }
    )

    //Date picker
    $(&#x27;#datepicker&#x27;).datepicker({
      autoclose: true
    })
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
</article>